<script lang="ts" setup>
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  value: {
    type: [String, Number],
    default: ''
  },
  width: {
    type: Number,
    default: 90
  },
  blank: {
    type: Boolean,
    default: false
  },
  num: {
    type: Number,
    default: 1
  }
})
</script>

<template>
  <div class="form-lb-box w-form-lb" :style="{width:(100*num)+'%'}">
    <div v-if="!blank" class="form-lb" :style="{width:width+'px'}">
      {{ label }}
    </div>
    <div class="form-value">
      <slot>{{ value }}</slot>
    </div>
  </div>
</template>

<style scoped lang="scss">

  .form-lb-box{
    @include hor-group();
    @include ly-grow();
    flex:auto;
    width:100%;

    &>div{
      vertical-align: middle;
      padding:4px 6px;
      box-sizing: border-box;
      word-break: break-all;
      white-space: normal;
      border-right: 1px solid var(--w-color-bor);
      border-bottom: 1px solid var(--w-color-bor);
    }

    .form-lb{
      @include hor-group(end);
      @include text-dot();
      flex:none;
      background: var(--w-tb-header-bg);
      color:#000;
    }
    .form-value{
      @include hor-group(start);
      flex:auto;
      width:100%;
    }
  }
</style>
